<template>
  <div class="all-list-wrap">
    <section>
      <!-- <h2 class="list-type">推荐榜</h2> -->
      <div
        v-for="(item, index) of mainList"
        :key="item.id"
        @click="goListContent(item.id)"
        class="gov-each-list-wrap"
      >
        <div class="gov-each-list-img-wrap">
          <img v-lazy="item.coverImgUrl" />
          <span class="uptime">
            {{ item.trackUpdateTime | date }}
          </span>
        </div>
        <div class="gov-each-list-top">
          <mu-circular-progress
            :size="30"
            color="red"
            v-if="item.loading"
            class="loading"
          />
          <div v-for="(it, inde) of mainList[index].music" :key="it.id">
            <div>
              {{ inde + 1 }}. {{ it.name }}
              <span v-for="(i, ind) of it.artists" :key="i.id">
                {{ i.name }}<span v-if="ind !== it.artists.length - 1">/</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- <section>
      <h2 class="list-type">全球榜</h2>
      <div v-for="item of otherList" @click="goListContent(item.key)" class="each-list-wrap" :key="item.id">
        <div class="each-list-img">
          <img v-lazy="item.url">
        </div>
        <div class="each-list-msg">
          <div class="each-list-name">
            {{item.val}}
          </div>
          <div class="each-list-uptime">
            每周{{item.upTime}}更新
          </div>
        </div>
      </div>
    </section> -->
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import _ from "lodash";
import { TopListInfo } from "@/model/top-list.model";
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { MusicInfo } from "@/model/music-info.model";
import Router from "vue-router";
@Component({})
export default class ListComponent extends Vue {
  // 暂时废弃
  topMusic: [] = [];
  mainList: Array<(TopListInfo & { music?: MusicInfo[]; loading?: boolean })> = [];
  otherList: TopListInfo[] = [];

  $router: Router;
  $api: APIType;

  public mounted() {
    this.getTopList().then((result) => {
      // this.mainList = result?.list.slice(0, 4);
      this.mainList = result?.list ?? [];
      this.otherList = result?.list.slice(4);
      this.mainList?.forEach((x) => {
        this.$set(x, "music", []);
        this.$set(x, "loading", true);
        this.loadListData(x).then();
      });
    });
  }
  // 获取榜单类型
  async getTopList() {
    const result = await this.$api.getTopList();
    return result;
  }
  async loadListData(item: TopListInfo) {
    const list: TopListInfo = await this.$api.getTopListDetail(item?.id);
    if (!list) {
      await this.$api.getPlayListDetail(item?.id).then(res => {
        this.$set(item, "music", res.playlist?.tracks?.slice(0, 3));
        this.$set(item, "loading", false);
      });
    } else {
      this.$set(item, "music", list?.tracks?.slice(0, 3));
      this.$set(item, "loading", false);
    }
  }
  goListContent(id: CommonIdType) {
    // console.log(`/listContent/${ind}`)
    this.$router.push({ path: `/listContent/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.all-list-wrap {
  background-color: #f1f6f4;
  .list-type {
    margin-left: 0.1rem;
    padding-left: 0.05rem;
    font-size: 0.16rem;
    color: #494949;
    border-left: 4px solid #ea4558;
  }
}
.gov-each-list-wrap {
  display: flex;
  .gov-each-list-img-wrap {
    position: relative;
    padding: 0.1rem;
    img {
      width: 2rem;
      height: 2rem;
    }
    .uptime {
      position: absolute;
      right: 0.11rem;
      top: 0.11rem;
      color: #fff;
      font-size: 0.12rem;
    }
  }
  .gov-each-list-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #dce1df;
    color: #6d6d6d;
    font-size: 0.14rem;
    .loading {
      margin: 0 auto;
    }
  }
}
.each-list-wrap {
  display: flex;
  .each-list-img {
    padding: 0.1rem;
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  .each-list-msg {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #e1e6e4;
    .each-list-name {
      font-size: 0.16rem;
      color: #323735;
    }
    .each-list-uptime {
      font-size: 0.13rem;
      color: #969b99;
    }
  }
}
</style>
